<div id="app">
    <el-card class="box-card">
        <div slot="header">
            <span>添加商品</span>
        </div>
        <el-form label-width="80px" :model="goods" :rules="rules" ref="ruleForm">
            <el-form-item label="标题" prop="title">
                <el-input v-model="goods.title" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item label="分类" prop="category">
                <el-cascader expand-trigger="click" :options="categoryObjects" :change-on-select="false" v-model="treeValue" @change="handleItemChange" :props="props" clearable></el-cascader>
            </el-form-item>
            <el-form-item label="推荐" prop="isHot">
                <el-radio-group v-model="goods.isHot">
                    <el-radio-button label="true">推荐</el-radio-button>
                    <el-radio-button label="false">不推荐</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="新品" prop="isNew">
                <el-radio-group v-model="goods.isNew">
                    <el-radio-button label="true">新品</el-radio-button>
                    <el-radio-button label="false">非新品</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input v-model="goods.price" type="number" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item label="主图">
                <el-upload action="/file/upload" :auto-upload=true name="file" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture-card" :file-list="goods.images" :on-success="uploadSuccess">
                    <i class="el-icon-plus"></i>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <el-dialog title="图片预览" v-model="dialogVisible" size="tiny">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="描述图">
                <el-upload action="/file/upload" :auto-upload=true name="file" :on-preview="handleDetailPreview" :on-remove="handleDetailRemove" list-type="picture-card" :file-list="goods.detail" :on-success="detailUploadSuccess">
                    <i class="el-icon-plus"></i>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <el-dialog title="图片预览" v-model="dialogVisible" size="tiny">
                    <img width="100%" :src="dialogDetailImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit()">添加</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        treeValue: [],
        goods: {
            title: '',
            images: [],
            detail: [],
            category: '',
            isHot: false,
            isNew: false
        },
        categoryObjects: [],
        dialogImageUrl: '',
        dialogDetailImageUrl: '',
        dialogVisible: false,
        props: {
            value: 'objectId',
            label: 'title',
            children: 'children'
        },
        rules: {
            title: [{
                required: true,
                message: '请输入标题',
                trigger: 'blur'
            }],
            category: [{
                required: true,
                message: '请选择分类',
                trigger: 'blur'
            }],
            price: [{
                required: true,
                message: '请输入价格',
                trigger: 'blur'
            }]
        },
    },
    mounted: function() {
        new Promise( (resolve, reject) => {
            // 加载分类
            this.$http.post('../category/list').then(response => {
                // 在前端处理无限级分类
                this.categoryObjects = recursion(response.body, '');
                resolve(response.body);
            });
        }).then((categoryArray)=>{
            // 编辑时加载原数据
            if (getQueryString('objectId')) {
                // 发起请求
                this.$http.post('/goods/find', {objectId: getQueryString('objectId')}).then(response => {
                    console.log(response)
                    this.goods = response.body;
                    this.goods.images = response.body.images.map(item => {
                        return {name: '', url: item};
                    });
                    this.goods.detail = response.body.detail.map(item => {
                        return {name: '', url: item};
                    });
                    this.goods.price = this.goods.price.toString();
                    // 找到父类路线
                    var treeValue = [];
                    parentWay(categoryArray, this.goods.category, treeValue);
                    console.log(treeValue);
                    this.treeValue = treeValue;
                });
            }
        })

    },
    methods: {
        loadCategory: function() {
                    },
        loadGoods: function () {
            
        },
        handleItemChange: function(val) {
            this.goods.category = val.slice(-1).toString();
        },
        submit: function() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    // 验证通过
                    this.$http.post('./add', this.goods).then(response => {
                        console.log(response);
                        this.$message({
                            message: response.body.code === undefined ? '保存成功' : '保存失败 - code:' + response.body.code
                        });
                    });
                }
            });

        },
        uploadSuccess: function(res) {
            console.log(res);
            this.goods.images.push(res);
        },
        handleRemove(file, images) {
            this.goods.images = images;
        },
        handlePreview(file) {
            console.log(file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        detailUploadSuccess: function(res) {
            console.log(res)
            this.goods.detail.push(res);
        },
        handleDetailRemove(file, images) {
            this.goods.detail = images;
        },
        handleDetailPreview(file) {
            console.log(file);
            this.dialogDetailImageUrl = file.url;
            this.dialogVisible = true;
        },
    }
});
</script>